<template>
  <div class="body">
    <div class="top">
      <h1>新型冠状肺炎实时监测</h1>
      <div class="right">当前时间：{{ time }}</div>
    </div>
    <div class="content">
      <div class="left">
        <div class="left-top">
          <dv-border-box-8 class="a1">
            <Left1></Left1>
          </dv-border-box-8>
        </div>
        <div class="left-content">
          <dv-border-box-8 class="a1">
            <Left2></Left2>
          </dv-border-box-8>
        </div>
        <div class="footer">
          <dv-border-box-8 class="a1">
            <Left3></Left3>
          </dv-border-box-8>
        </div>
      </div>
      <div class="center">
        <div class="center-top">
          <dv-border-box-7 class="UnidreamLED">
            <ul class="ul1">
              <li>123546</li>
              <li>123546</li>
              <li>123546</li>
              <li>123546</li>
            </ul>
          </dv-border-box-7>
          <ul class="ul2">
            <li>累计确诊</li>
            <li>现存确诊</li>
            <li>累计治愈</li>
            <li>累计死亡</li>
          </ul>
        </div>
        <div class="center-center">
          <div class="yuan">
            <img src="../assets/4.png" />
          </div>
          <div class="yuan1">
            <img src="../assets/3.png" />
          </div>
          <div class="yuan2">
            <img src="../assets/2.png" />
          </div>
          
            <Word class="word" ></Word>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <dv-border-box-8 class="a1">
            <Right1></Right1>
          </dv-border-box-8>
        </div>
        <div class="right-content">
          <dv-border-box-8 class="a1">
            <Right2></Right2>
          </dv-border-box-8>
        </div>
        <div class="footer">
          <dv-border-box-8 class="a1">
            <Right3></Right3>
          </dv-border-box-8>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { nowTime } from "@/components/date";
import Left1 from "../components/left1.vue";
import Left2 from "../components/left2.vue";
import Right1 from "../components/right1.vue";
import Right3 from "../components/right3.vue";
import Left3 from "../components/left3.vue";
import Right2 from "../components/right2.vue";
import Word from "../components/word.vue";
export default {
  data() {
    return {
      time: "",
     
      list: [],
    };
  },
  methods: {
    
  },
  components: {
    Left1,
    Left2,
    Right1,
    Right3,
    Left3,
    Right1,
    Right2,
    Word,
    Word
},
  computed: {},
  watch: {},
  created() {
    setInterval(() => {
      let aa = nowTime();
      this.time = aa;
    }, 1000);
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.body {
  width: 1920px;
  height: 1080px;
  background-image: url(../assets/1.jpg);
  background-size: 100% 100%;

  .a1 {
    width: 100%;
    height: 100%;
  }
  .top {
    display: block;
    height: 100px;
    background-image: url(../assets/时间.png);
    background-size: 100% 100%;
    text-align: center;
    line-height: 100px;
    color: #fff;
    position: relative;
    box-sizing: border-box;
    h1 {
      font-size: 35px;
    }

    .right {
      position: absolute;
      right: 20px;
      top: -10px;
      font-size: 20px;
      color: #b6b8c6;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    .left {
      flex: 1;
      .left-top {
        width: 100%;
        height: 33.33%;
      }
      .left-content {
        width: 100%;
        height: 33.33%;
      }
      .footer {
        width: 100%;
        height: 33.33%;
      }
      .left-top,
      .left-content,
      .footer {
        box-sizing: border-box;
        padding: 10px;
      }
    }
    .center {
      flex: 1.4;
      .center-top {
        width: 100%;
        height: 150px;
        box-sizing: border-box;
        background-color: rgba(101, 132, 226, 0.1);
        margin-top: 10px;
        padding: 10px;
        .UnidreamLED {
          width: 100%;
          height: 60%;
          .ul1 {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;

            li {
              width: 25%;
              text-align: center;
              font-size: 40px;
              border-left: #3e4b81 1px solid;
              color: #ffeb7b;
            }
            li:nth-child(1) {
              border: 0;
            }
          }
        }
        .ul2 {
          width: 100%;
          height: 40%;
          display: flex;
          align-items: center;
          li {
            width: 25%;
            text-align: center;
            color: hsla(0, 0%, 100%, 0.7);
          }
        }
      }
      .center-center {
        width: 100%;
        height: calc(100% - 181px);
        // background: rgb(13, 255, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .word{
          width: 700px;
          height: 450px;
          z-index: 999;
        }
        .yuan {
          position: absolute;
          top: auto;
          left: auto;
          width: 450px;
          height: 450px;
          // background: gold;
          // animation: yuan 20s infinite linear ;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .yuan1 {
          position: absolute;
          top: auto;
          left: auto;
          width: 600px;
          height: 600px;
          animation: yuan 20s infinite linear;
          border-radius: 50%;
          z-index: 999;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .yuan2 {
          position: absolute;
          top: auto;
          left: auto;
          width: 500px;
          height: 500px;
          animation: yuan2 20s infinite linear;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        
      }
    }
    @keyframes yuan {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes yuan2 {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }
    .right {
      flex: 1;
      .right-top {
        width: 100%;
        height: 33.33%;
      }
      .right-content {
        width: 100%;
        height: 33.33%;
      }
      .footer {
        width: 100%;
        height: 33.33%;
      }
      .right-top,
      .right-content,
      .footer {
        box-sizing: border-box;
        padding: 10px;
      }
    }
  }
}
</style>
